<template>
  <div id="app1">
    <el-row>
      <el-col :lg="4" :sm="6" :xs="12" v-for="o in data" :key="o.index">
        <el-card :body-style="{ padding: '5px' }" style="background-color: #FFFACD;border: 1px solid #CD7F32;">
          <div class="d3">
            <img @click="toSongList(o.id)" :src="o.picUrl">
            <div class="image-slot">
              <i class="el-icon-headset"><span style="margin-left: 10px">{{ (o.playCount/10000).toFixed(1)}}万</span></i>
            </div>
            <div class="title">
              <span>{{o.name}}</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>


  </div>
</template>

<script>
  import musicApi from '../musicApi/apis/songs'
  export default {
    name: "list",
    data() {
      return {
        data: []
      }
    },
    mounted() {
      musicApi.getPersonalized(30).then(res => {
        this.data = res.data.result
      })
    },
    methods: {
      toSongList(id) {
        this.$router.push({ path: '/songList', query: { id: id } });
      }
    }
  }
</script>

<style scoped>
  #app1 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 80px;
  }

  .el-card {
    margin: 10px;
  }

  @media (min-width: 600px) {
    .d3 {
      display: block;
      position: relative;
      cursor: pointer;
      height: 320px;
    }
  }

  @media (max-width: 600px) {
    .d3 {
      display: block;
      position: relative;
      cursor: pointer;
      height: 200px;
    }
  }

  .d3 img {
    width: 100%;
    display: block;
  }

  .title {
    color: #660033;
  }

  .image-slot {
    background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 97%, rgba(0, 0, 0, 0.5) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 97%, rgba(0, 0, 0, 0.5) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 97%, rgba(0, 0, 0, 0.5) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
    position: absolute;
    top: 10px;
    right: 10px;
    color: #ffcc00;
  }
</style>